<template>
    <div class="main-content">
        <div class="search between">
            <div class="query">
                <el-date-picker v-model="params.bind_time" type="datetimerange" range-separator="至"
                    start-placeholder="领取开始时间" end-placeholder="领取结束时间" value-format="YYYY-MM-DD HH:mm:ss"
                    @change="getTable" />
                <el-input style="width: 180px;" placeholder="领取手机号" v-model="params.member_phone" clearable
                    @change="getTable"></el-input>
                <el-input style="width: 180px;" placeholder="券码" v-model="params.code" clearable
                    @change="getTable"></el-input>

                <el-select style="width: 180px;" v-model="params.state" placeholder="状态" clearable @change="getTable">
                    <el-option label="未使用" value="2" />
                    <el-option label="已使用" value="3" />
                    <el-option label="已过期" value="4" />
                </el-select>

                <span class="fold" v-show="isFold">
                    <el-select style="width: 180px;" v-model="params.type" placeholder="类型" clearable
                        @change="getTable">
                        <el-option label="现金券" value="1" />
                        <el-option label="折扣券" value="2" />
                    </el-select>
                    <el-input style="width: 180px;" placeholder="券名称" v-model="params.coupon_name" clearable
                        @change="getTable"></el-input>
                    <el-input style="width: 180px;" placeholder="券面额" v-model="params.denomination" clearable
                        @change="getTable"></el-input>
                </span>
                <el-button class="ico-button" @click="switchFold" :icon="isFold ? 'ArrowUp' : 'ArrowDown'"></el-button>
            </div>
            <div class="set-group">
                <el-button class="ico-button" @click="refresh">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                </el-button>
            </div>
        </div>
        <div class="table">
            <div class="table-main">
                <el-table :data="table.data" resizable border show-overflow-tooltip max-height="100%" height="100%"
                    v-loading="table.load">
                    <template v-for="row in table.column">
                        <el-table-column :label="row.label" :prop="row.key" :width="row.width" :align="row.align"
                            :fixed="row.fixed">
                            <template #default="scope">
                                <span v-if="row.key == 'denomination'">

                                    {{ Number(scope.row.denomination) }} {{ scope.row.type == 1 ? '元': '折' }}
                                </span>
                                <span v-else-if="row.key == 'state'">
                                    <el-tag type="warning" v-if="scope.row[row.key] == 1">{{ scope.row.state_name
                                        }}</el-tag>
                                    <el-tag type="success" v-else-if="scope.row[row.key] == 2">{{ scope.row.state_name
                                        }}</el-tag>
                                    <el-tag type="danger" v-else-if="scope.row[row.key] == 3">{{ scope.row.state_name
                                        }}</el-tag>
                                </span>
                                <span v-else>
                                    {{ scope.row[row.key] }}
                                </span>
                            </template>
                        </el-table-column>
                    </template>
                    <el-table-column label="相关操作" column-key="handle" width="120" align="center" fixed="right">
                        <template #default="scope">
                            <el-button-group>
                                <el-button link type="warning" v-if="scope.row.state == 1"
                                    @click="cancel(scope.row)">作废</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <el-pagination v-model:current-page="pages.page" v-model:page-size="pages.page_size"
                    :page-sizes="[30, 50, 100, 200, 300, 500]" :small="true" :background="true"
                    layout="total, sizes, prev, pager, next" :total="pages.count" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>

    </div>
</template>
<script setup name="CouponCodeList">

const { proxy } = getCurrentInstance()

// 搜索表单 下拉收起 start 
const isFold = ref(false)
function switchFold() {
    isFold.value = !isFold.value
}
// 搜索表单 下拉收起 end

// 表格字段配置 start
const table = reactive({
    load: false,
    column: [
        { label: 'ID', key: 'id', width: '100', show: true, align: 'center' },
        { label: '券名称', key: 'name', width: 'auto', show: true, align: 'center' },
        { label: '券码', key: 'code', width: '160', show: true, align: 'center' },
        { label: '面额', key: 'denomination', width: 'auto', show: true, align: 'center' },
        { label: '门槛', key: 'threshold', width: 'auto', show: true, align: 'center' },
        { label: '状态', key: 'state', width: '100', show: true, align: 'center' },
        { label: '领取手机号', key: 'user_phone', width: '180', show: true, align: 'center' },
        { label: '领取时间', key: 'create_time', width: '180', show: true, align: 'center' },
        { label: '开始时间', key: 'start_time', width: '180', show: true, align: 'center' },
        { label: '结束时间', key: 'end_time', width: '180', show: true, align: 'center' },
        { label: '更新时间', key: 'update_time', width: '180', show: true, align: 'center' },
    ],
    data: []
})
// 表格字段配置 end 


const date = new Date();
const cYear = date.getFullYear();
const currentMonth = date.getMonth() + 1;
const cMonth = currentMonth.toString().padStart(2, '0'); // 月份从0开始，所以要+1，并用0填充
var cDay = date.getDate().toString().padStart(2, '0');            // 用0填充日期

date.setMonth(date.getMonth() - 1);
const pYear = date.getFullYear();
const pMonth = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以要+1，并用0填充
var pDay = date.getDate().toString().padStart(2, '0');            // 用0填充日期

// 页面数据 start
const params = reactive({
    store_coupon: '',
    bind_time: [pYear + '-' + pMonth + '-' + pDay + ' 00:00:00', cYear + '-' + cMonth + '-' + cDay + ' 23:59:59'],
    member_phone: '',
    code: '',
    state: '',
    type: '',
    coupon_name: '',
    denomination: '',
})
const pages = reactive({
    page: 1,
    page_size: 30,
    count: 0
})

onMounted(() => {
    getTable()
})

function handleSizeChange(val) {
    pages.page_size = val
    getTable()
}
function handleCurrentChange(val) {
    pages.page = val
    getTable()
}
function refresh() {
    pages.page = 1
    getTable()
}
async function getTable() {
    table.load = true
    let res = await proxy.$get('ActiveCouponReceiveList', {
        page: pages.page,
        page_size: pages.page_size,
        ...params,
    }, false)
    table.load = false
    if (res.code === 0) {
        table.data = res.data.list || []
        pages.count = res.data.total ? Number(res.data.total) : 0
    }
}
// 页面数据 end

// 作废
async function cancel(row) {
    let res = await proxy.$post('ActiveCouponReceiveCancel', {
        id: row.id,
    }, false)
    if(res.code ==0) {
        getTable()
    }
}


</script>
<style scoped>
.read-the-docs {
    color: #888;
}

.import-box {
    display: inline-block;
    position: relative;
    margin: 0 10px;

}

.text-under {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
</style>